<div id="demo"> 
		<div id="indemo"> 
			<div id="demo1"> 
			 <?php 
			if(!empty($product)){
				foreach ($product as $p){
					echo "<div class='proshowimg'>";
					echo anchor("product/show/".$p->id, 
					"<img src='".$p->imagethumb."' alt='".$p->title."' />".$p->title);
					echo '</div>';
				}
			}
			?>
			</div> 
			<div id="demo2"></div> 
			</div> 
		</div> 
<script>
(function($){
	
	var pluginName = 'Hwmarquee',
	defaults = {
		'speed'	: 10,
		'div'	: 'demo',
		'div1'	: 'demo1',
		'div2'	: 'demo2'
	};
	function Hwmarquee(element, options){
		this.element = element;
		this.options = $.extend({}, defaults, options );
		this.init();
	}
	Hwmarquee.prototype.init = function(){
		var opts = this.options;
		$('#'+opts.div2).html( $('#'+opts.div1).html() );
		
		var tab=document.getElementById("demo"); 
		var tab1=document.getElementById("demo1"); 
		var tab2=document.getElementById("demo2"); 
		tab2.innerHTML=tab1.innerHTML; 
		function funcM(){
			if(tab.scrollLeft<=0) 
				tab.scrollLeft+=tab2.offsetWidth 
			else{ 
				tab.scrollLeft--;
			}
		}
		var timer=setInterval(funcM, opts.speed);
		$('#'+opts.div).hover(function(){
			clearInterval(timer);
		},
		function(){
			timer=setInterval(funcM, opts.speed);
		});
	};
	$.fn.Hwmarquee = function(options){		
		return this.each(function(){
			 if (!$.data(this, 'plugin_' + pluginName)) {
				 $.data(this, 'plugin_' + pluginName,
					new Hwmarquee( this, options ));
			 }
		});
	}
})(jQuery);

$(function(){
	$('#demo').Hwmarquee({speed:10});
})

</script>
<style type="text/css"> 
<!-- 
#demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    width: 650px; 
} 
#demo img { 
    border: 3px solid #F2F2F2; 
} 
#indemo { 
    float: left; 
    width: 800%; 
} 
#demo1 { 
    float: left; 
} 
#demo2 { 
    float: left; 
} 
--> 
</style> 